<template>
	<view class="page-content">
		<scroll-view class="swiper-scroll" :refresher-background='refresherBackColor' @scroll='scroll' scroll-y="true"
		 :scroll-top='topPosition' :scroll-anchoring='true' scroll-with-animation lower-threshold='500' @scrolltolower="getNextPage"
		 :refresher-threshold='75' :refresher-triggered='triggeredstate' :refresher-enabled='canrefresh && canrefush'
		 @refresherrefresh='refresh' @refresherrestore="onRestore" refresher-default-style='none' :bounce='false'
		 @refresherpulling="pulling">
		  
			<view class="indexbody-index-wrapper colRange borderBox">
				<view class="topheaderCard-container colRange borderBox">
					<view class="ellipse" :style="'background:'+ refresherBackColor +';'"></view>
				</view>
				<!-- 加载图片 -->
 				<view class="loading-img rowRanges" :style="'margin-top:'+(topheight-75)+'px;'">
					<view class="imgbox defImg">
						<image src="../static/img/home/loading.gif" mode="aspectFit"></image>
					</view>
				</view>
				<!-- 顶部banner  -->
				<view class="pageBody-container colRange borderBox">
					<view class="column-container">
						<view class="bannerSwiper-container blockRange borderBox" v-if="bannerList.length>0">
							<swiper class="swiper-box" :current="swpidx" @change="changeColor" :autoplay="true" :interval="3000"
							 :duration="500" :indicator-dots="true" :indicator-active-color="'#fff'" circular>
								<swiper-item v-for="(items,index) in bannerList" :key='index'>
									<view class="swiper-item defImg" @click="goUrl(items)">
										<image :src="appUrl + items.bannerUrl" mode="aspectFit"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>

						<!-- 导航栏 -->
						<view class="navslider-box" v-if="navigateList.length > 0">
							<swiper class="swiper-type swiper-nav" :indicator-dots="navbarList.length > 10 ? true : false" indicator-color="#eaeaea"
							 indicator-active-color="#FE3A33" :duration="500" :style="sliderH">
								<swiper-item v-for="(sliderItem, index) in navigateList" :key="index">
									<view class="slider_itemslist rowRange">
										<view class="item colRange" v-for="(item, idx) in sliderItem" :key="idx" @click="gojgqUrl(item,true)">
											<image :src="appUrl + item.imgUrl" :lazy-load="true" mode="aspectFit" style="height: 90upx;width: 90upx"></image>
											<view class="desc">{{ item.name }}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			
			    <!-- 公告 -->
				<view class="pageBody-bulletin" v-if="bulletinList.length > 0">
					<view class="bulletin-box">
						<view class="bulletin-logo" @click="navigatorTo('/pages/daren/index')">
							<image src="/static/img/index/bulletin.png" class="bulletin-logo-image"></image>
						</view>
						<swiper class="bulletin-swiper-slider" :vertical="true" :circular="true" :interval="2000" :autoplay="true">
							<swiper-item class="bulletin-swiper-slider-item" v-for="(daren, index) in bulletinList" :key="index" @click="darenDetail(daren)">
								<text class="bulletin-swiper-slider-item-text">{{ daren.title }}</text>
							</swiper-item>
						</swiper>
					</view>
				</view>	
				
				<!-- 精选好物   -->
				<view class="index-goods" style="background: ghostwhite;" v-if="chosenList.length > 0">
					<view style="text-align: center;margin-bottom: 16upx;padding-top: 16upx;">
						<text style="font-size: 32upx;color: #FB2C1A;margin:0 17rpx;">精选好物</text>
					</view>
					<view class="goods-list" v-if="chosenList.length > 0">
						<goods-list v-for="(items, index) in chosenList" :itemid="items.itemid" :shopname='items.shopname'
							:itempic="items.itempic" :itemtitle="items.itemtitle"
							:itemprice="' ¥' + items.itemprice" :itemsale="items.itemsale"
							:itemendprice="items.itemendprice" :couponmoney="items.couponmoney"></goods-list>
					</view>
				</view>
			
				<!-- 好物推荐   -->
				<view class="index-goods" style="background: ghostwhite;"
					v-if="recommendList.length > 0">
					<view style="text-align: center;margin-bottom: 16upx;padding-top: 16upx;">
						<text style="font-size: 32upx;color: #FB2C1A;margin:0 17rpx;">好物推荐</text>
					</view>
					<view class="goods-list" v-if="recommendList.length > 0">
						<goods-list v-for="(items, index) in recommendList" :itemid="items.itemid" :shopname='items.shopname'
							:itempic="items.itempic" :itemtitle="items.itemtitle"
							:itemprice="' ¥' + items.itemprice" :itemsale="items.itemsale"
							:itemendprice="items.itemendprice" :couponmoney="items.couponmoney"></goods-list>
					</view>
				</view>
			
			</view>
		</scroll-view>
		<top v-if="tops>1000" @toTop='scrolltoTops'></top>
	</view>
</template>

<script>
	import top from './customize/top.vue'
	export default {
		props: {
			topheight: {
				type: Number,
				default: 10
			},
			canrefush: {
				type: Boolean
			},
			fixedClass: {
				type: Boolean,
				default: false
			}
		},
		components: {
			top
		},
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				pageHeight: '',
				//设置自定义下拉刷新区域背景颜色
				refresherBackColor: '',
				//顶部banner
				bannerList: [],

				//导航数据
				navigateList: [],
				navbarList: [],
				sliderH: '',

				//设置竖向滚动条位置
				topPosition: 0,
				tops: 0,
				
				//公告信息
				bulletinList:[],
				//加载状态
				loadingState: false,
				//当前分页
				currentPage: 1,
				loadstatus: 'loading',
				//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				triggeredstate: true,
				//当前所在滑块的 index
				swpidx: 0,
				//开启自定义下拉刷新
				canrefresh: true,
				//精选好物
				chosenList:[],
				//好物推荐
				recommendList:[]
			}
		},
		watch: {
			navbarList(nval, oval) {
				let index = 0;
				while (index < nval.length) {
					this.navigateList.push(nval.slice(index, (index += 10)));
				}
				if (this.navbarList.length > 5) {
					this.sliderH = 'height:345rpx;';
				} else {
					this.sliderH = 'height:160rpx;';
				}
			},
			refresherBackColor: {
				handler(nvl, ovl) {
					this.$emit('passColor', nvl)
				},
				immediate: true
			}
		},
		created() {
			this._freshing = false;
			uni.$emit('initpage')
			this.getBannerList();
			this.getNavigateList();
			this.getBulletinList();
			this.getDeservesList();
			this.getSalesList();
		},
		mounted() {
			this.$emit('scrolltoTop')
			this.fixedClass = false;
			// setTimeout(() => {
			// 	this.getfixedHeight()
			// }, 1500)
		},
		methods: {
			//获取高度
			getfixedHeight(e) {
				// uni.createSelectorQuery().in(this).select('.goods-bottom-List').boundingClientRect(data => {
				// 	this.$emit('pushfixed', data.top)
				// }).exec();
			},
			//滚动时触发
			scroll(e) {
				this.$emit('scrollNum', e.detail.scrollTop)
				this.tops = e.detail.scrollTop
				if (!e.detail.scrollTop > 0) {
					setTimeout(() => {
						this.canrefresh = true
					})
				} else {
					// this.canrefresh = false
				}
			},
			//滚动到底部/右边，会触发 scrolltolower 事件 下一页数据
			getNextPage() {
				console.info('下一页')
				if (this.loadingState) {
					this.getSalesList();
				}
			},
			//自定义下拉刷新被触发	
			refresh(e) {
				this.triggeredstate = true
				if (this._freshing) return;
				this._freshing = true;
				this.getBannerList();
				setTimeout(()=>{
					this.triggeredstate = false;
					this._freshing = false;
				},8000)
			},
			//自定义下拉刷新被复位
			onRestore() {
				this.swpidx = 0
				console.log('下拉被终止');
			},
			//自定义下拉刷新控件被下拉
			pulling(e) {},
			//更换颜色
			changeColor(e) {
				this.swpidx = e.detail.current
				this.bannerList.forEach((itm, idx) => {
					if (idx == e.detail.current) {
						this.refresherBackColor = itm.color
					}
				})
			},
			//滚动到顶部
			scrolltoTops() {
				this.topPosition = this.tops;
				this.$nextTick(() => {
					this.topPosition = 0
				})
			},
			//获取banner数据
			getBannerList() {
				//获取banner
				this.$u.api.banners().then(res => {
					if (res.code == 200){
						this.bannerList = res.data;
						debugger
						this.refresherBackColor = res.data[0].color;
						setTimeout(() => {
							this.triggeredstate = false;
							this._freshing = false;
						}, 300)
					}
				});
			},
			//获取navigate数据
			getNavigateList() {
				//获取banner
				this.$u.api.navigates().then(res => {
					if (res.code == 200){
						this.navbarList = res.data;
						this.refresherBackColor = this.navbarList[0].color;
						setTimeout(() => {
							this.triggeredstate = false;
							this._freshing = false;
						}, 300)
					}
				});
			},
			getBulletinList() {
				//获取公告
				this.$u.api.bulletins().then(res => {
					if (res.code == 200){
						this.bulletinList = res.data;
					}
				});
			},
			//获取精选好物
			getDeservesList(){
				this.$u.api.deserves().then(res => {
					if (res.code == 200){
						this.chosenList = res.data;
					}
				});
			},
			//好物推荐
			getSalesList(){
				this.$u.api.saless({sale_type:'2',cid:'0',min_id:this.currentPage,back:'10'}).then(res => {
					if (res.code == 1){
						if (res.data.length < 10) {
							this.loadingState = false
							this.loadstatus = 'normal'
						} else {
							this.loadstatus = 'loading'
							this.loadingState = true
						}
						this.recommendList = this.recommendList.concat(res.data)
						this.currentPage = res.min_id;
					}
				});
			},
			//金刚区
			gojgqUrl(info) {
				if (info.urlType == '0') {
					uni.navigateTo({
						url: 'pages/webView/webView?url=' + info.jumpUrl
					})
				} else if (info.urlType == '5') {
					uni.navigateTo({
						url: info.jumpUrl
					})
				} else if (info.urlType == '10') {
					// #ifdef APP-PLUS
					if (plus.os.name == 'Android') {
						console.log(plus.os.name);
						plus.runtime.openURL(info.jumpUrl, res => {
							uni.navigateTo({
								url: 'pages/webView/webView?url=' + info.jumpUrl
							})
						}, 'com.taobao.taobao');
					} else {
						info.jumpUrl = info.jumpUrl.split('//')[1]
						plus.runtime.openURL('taobao://' + info.jumpUrl, function(res) {
							uni.navigateTo({
								url: 'pages/webView/webView?url=' + info.jumpUrl
							})
						}, 'taobao://');
					}
					// #endif
				}
			},
		}
	}
</script>

<style lang="scss">

	.swiper-scroll{
		width: 100%;
		height: 100vh;
	}
	.loading-img {
		width: 100%;
		height: 150rpx;
		.imgbox {
			width: 208rpx;
			height: 126rpx;
			// max-height: 72rpx;
		}
	}

	.indexbody-index-wrapper {
		width: 100%;
		position: relative;
	
		.topheaderCard-container {
			width: 100%;
			height: 380rpx;
			position: absolute;
	
			.ellipse {
				width: 130%;
				height: 100%;
				border-radius: 0 0 50% 50%;
			}
		}
	
		.pageBody-container {
			width: 100%;
			background-color: #FFFFFF;
	
			.column-container {
				width: 100%;
				z-index: 10;
	
				.bannerSwiper-container {
					width: 100%;
					height: 280rpx;

					margin-bottom: 20rpx;
	
					/deep/.swiper-box {
						width: 100%;
						height: 100%;
	
						.swiper-item {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
							overflow: hidden;
						}
	
						.uni-swiper-dot {
							width: 20rpx;
							height: 6rpx;
							border-radius: 3rpx;
						}
					}
				}
	
				.centerSwiper-container {
					width: 100%;
					height: 190rpx;
					padding: 0 32rpx;
					margin-bottom: 20rpx;
	
					.swiper-box {
						width: 100%;
						height: 100%;
	
						.swiper-item {
							width: 100%;
							height: 100%;
						}
					}
				}
	
				.cardsList-container {
					width: 100%;
					flex-wrap: wrap;
					padding: 0 32rpx;
					margin-bottom: 20rpx;
	
					.card-items {
						width: 340rpx;
						height: 135rpx;
						overflow: hidden;
						border-radius: 8rpx;
						margin-bottom: 10rpx;
					}
				}
	
				/deep/.navslider-box {
					width: 100%;
	
					.swiper-type {
						width: 100%;
	
						.slider_itemslist {
							width: 100%;
							flex-wrap: wrap;
	
							.item {
								width: 150rpx;
								margin-bottom: 30rpx;
	
								image {
									width: 80rpx;
									height: 80rpx;
									margin-bottom: 10rpx;
								}
	
								.desc {
									font-size: 28rpx;
									font-weight: 400;
									color: #333333;
								}
							}
						}
					}
	
					.uni-swiper-dot {
						width: 20rpx;
						height: 6rpx;
						border-radius: none;
					}
				}
			}
		}

		.pageBody-bulletin{
			width:100%;
			.bulletin-box{
				display: flex;
				padding: 0 20rpx;
				flex-direction: row;
				height: 50rpx;
				background-color: #f6f6f6;
				border-radius: 10rpx;
				.bulletin-logo{
					margin-right:5rpx;
					.bulletin-logo-image{
						width: 118rpx;
						height: 40rpx;
					}
				}
				.bulletin-swiper-slider{
					width:200px;
					height: 50rpx;
					line-height: 50rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
</style>
